<template>
	<view style="height: 100vh;">
		<uni-easyinput id="input" suffixIcon="search" v-model="searchVal" placeholder="输入姓名/身份证号/手机号搜索订单"
			@iconClick="iconClick" />
		<view id="table">
			<table>
				<template v-for="(item,index) in list">
					<tr>
						<td>{{disNameStr(item.keyword)}}</td>
						<td>{{item.createTime.substring(2)}}</td>
						<td>{{ zeroTwo(item.pricing)}} {{item.payState=='SUCCESS'?'已支付':'超时关闭'}}</td>
					</tr>
					<tr>
						<td>{{disMobStr(item.keyword)}}</td>
						<td>
							<view style="color: blueviolet;" @click="showReport(item)">查看报告</view>
						</td>
						<td>佣金 {{zeroTwo(item.brokerage)}}</td>
					</tr>
					<tr style="background-color: aliceblue;">
						<td colspan="3" />
					</tr>
				</template>
			</table>
		</view>
		<p style="text-align: center;">两周前的查询仅展示支付记录，报告将失效</p>
		<div id="page">
			<uni-pagination @change="change" :pageSize="pageSize" :total="total" :current="pageNum" :value="pageNum" />
		</div>
	</view>
</template>

<script>
	import {
		getPayList
	} from '@/api/index.js'
	
	export default {
		data() {
			return {
				searchVal: '',
				list: [],
				// 数据总量
				total: 0,
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageNum: 1
			}
		},
		props: {
			productId: {
				required: true,
				type: String
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				getPayList({
					body: this.productId,
					userId: this.$store.state.user.userid,
					keyword: this.searchVal,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then(res => {
					if (res.code == 200) {
						this.list = res.rows
						this.total = res.total
					}
				})
			},
			showReport(item) {
				if (item.payState != 'SUCCESS') {
					this.$modal.msgError("订单未支付")
					return
				}
				const index = Number.parseInt(item.body)
				this.$tab.navigateTo('/pages/' + this.$path[index] + '?orderNo=' + item.orderNo)
			},
			change(e) {
				// console.log(e)
				if (e.type == 'next') {
					this.pageNum++
					this.getData()
				} else if (e.type == 'prev') {
					this.pageNum = --this.pageNum < 1 ? 1 : this.pageNum
					this.getData()
				}
			},

			iconClick() {
				this.pageNum = 1
				this.getData()
			},

			disNameStr(item) {
				if (!item) {
					return ''
				} else {
					return item.slice(0, item.indexOf('::'))
				}
			},
			disMobStr(item) {
				if (!item) {
					return ''
				} else {
					return item.slice(item.lastIndexOf('::') + 2, item.length)
				}
			}
		}
	}
</script>

<style scoped>
	#input {
		height: 4.3vh;
		padding: 2px;
		margin: 0 auto;
	}

	#table {
		height: 86vh;
		overflow-y: scroll;
	}

	table {
		background-color: #fff;
		width: 99%;
		border-radius: 4px;
		margin: 2px auto;
	}

	td {
		padding: 2px;
		text-align: center;
	}

	#page {
		height: 10vh;
		margin: 0 2px;
	}
</style>